<template>
  <div
    v-loading="isLoading"
    class="panel-property"
  >
    <div class="content">
      <PanelLabelOverflowTooltip
        ref="panelLabelOverflowTooltip"
        :component-style="form.componentStyle"
      />
      <div class="helptip_line">
        <span class="helptip_label">{{ $demoi18n('win-container.specialInstructions') }}</span>
        <Helptip tip-key="winContainer.helptip"></Helptip>
      </div>
      <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        class="prop-form"
        label-position="right"
        :model="form"
        :rules="rules"
        label-width="30%"
      >
        <BaseOption
          :form="form"
          option="componentStyle"
          @change="componentStyleChange"
        />
        <VsFormItem :label="$demoi18n('win-container.positionOfTheDialogBox')">
          <el-select
            v-model="form.winLocation"
            size="default"
          >
            <el-option
              v-for="(item, index) in winLocationOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </VsFormItem>
        <OptionCollapse>
          <el-collapse-item
            :title="$demoi18n('panel.label.titleStyle')"
            name="cssStyle.title"
          >
            <el-radio v-model="form.isTitleFixed" :label="true">{{ $demoi18n('win-container.fixedName') }}</el-radio>
            <BaseOption
              v-if="form.isTitleFixed"
              :form="form"
              option="title"
            />
            <el-radio v-model="form.isTitleFixed" :label="false">{{ $demoi18n('win-container.obtainingVariablesAttributes') }}</el-radio>
            <el-tooltip
              class="item"
              :content="$demoi18n('win-container.obtainingVariablesAttributesTip')"
              placement="top-start"
            >
              <el-button
                :link="true"
                type="primary"
                :style="{ marginLeft: '-20px', marginBottom: '5px' }"
              >
                <el-icon><InfoFilled /></el-icon>
              </el-button>
            </el-tooltip>
            <div v-if="!form.isTitleFixed" class="variableTitle">
              <el-select
                v-model="form.selectAcceptEvt"
                size="default"
                :placeholder="$demoi18n('win-container.selectAnEventToReceive')"
                :placement="'bottom-end'"
              >
                <el-option
                  v-for="(item, index) in acceptEvtOption"
                  :key="index"
                  :label="item.key"
                  :value="item.key"
                ></el-option>
              </el-select>
              <el-input v-model="form.evtAttribute" size="default" :placeholder="$demoi18n('win-container.enterTheAttributeNameInTheEvent')"></el-input>
            </div>
            <BaseOption
              :form="form"
              option="cssStyle.title"
              :df-css-style-attrs="dfCssStyleAttrs.title"
              :hidden-fields="hiddenFields"
            />
            <BaseOption :form="form" option="isTitleSignVisiable" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="signMarginLeft" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="verticalLineBackgroundColor" />
          </el-collapse-item>
          <el-collapse-item
            :title="$demoi18n('dialog.dlgSetting')"
            name="dlgSetting"
          >
            <BaseOption :form="form" option="dialogBackgroundColor" :df-color="dfCssStyleAttrs.popBox.backgroundColor" />
            <VsFormItem :label="$demoi18n('dialog.enableMask')" :helptip="$demoi18n('win-container.enableMaskHelptip')">
              <el-radio-group v-model="form.mask" @change="changeMask">
                <el-radio :label="1">{{ $demoi18n('word.yes') }}</el-radio>
                <el-radio :label="0">{{ $demoi18n('word.no') }}</el-radio>
              </el-radio-group>
            </VsFormItem>
            <VsFormItem :label="$demoi18n('dialog.enabAnimation')" :helptip="$demoi18n('dialog.enabAnimationTip')">
              <el-radio-group v-model="form.dlgAnimation">
                <el-radio :label="1">{{ $demoi18n('word.yes') }}</el-radio>
                <el-radio :label="0">{{ $demoi18n('word.no') }}</el-radio>
              </el-radio-group>
            </VsFormItem>
            <VsFormItem :label="$demoi18n('win-container.isDesignViewWinLocation')" :helptip="$demoi18n('win-container.isDesignViewWinLocationHelptip')">
              <el-switch v-model="form.isDesignViewWinLocation" ></el-switch>
            </VsFormItem>
            <VsFormItem :label="$demoi18n('win-container.isHideTopABar')" :helptip="$demoi18n('win-container.isHideTopABarHelptip')">
              <el-switch v-model="form.isHideTopABar" :disabled="!form.mask"></el-switch>
            </VsFormItem>
            <VsFormItem :label="$demoi18n('win-container.eventControlStatusLabel')" :helptip="$demoi18n('win-container.eventControlStatusLabelTip')">
              <el-switch v-model="form.eventControlStatus"></el-switch>
            </VsFormItem>
            <VsFormItem v-if="form.eventControlStatus" :label="$demoi18n('win-container.openParamsListLabel')" :helptip="$demoi18n('win-container.openParamsListLabelTip')">
              <ValueInputer
                v-model:value="form.openStatusParams" valueType='Input'
                :placeholder="$demoi18n('win-container.closeParamsListPlaceholder')"
              />
            </VsFormItem>
            <VsFormItem v-if="form.eventControlStatus" :label="$demoi18n('win-container.closeParamsListLabel')" :helptip="$demoi18n('win-container.openParamsListLabelTip')">
              <ValueInputer
                v-model:value="form.closeStatusParams" valueType='Input'
                :placeholder="$demoi18n('win-container.closeParamsListPlaceholder')"
              />
            </VsFormItem>
          </el-collapse-item>
        </OptionCollapse>
      </el-form>
    </div>
    <PanelPropertyBottom :config="config" :widgetInstanceId="widgetInstanceId" :form="form" />
  </div>
</template>
<script>
import OptionCollapse from '@/components/common/base-option/option-collapse/option-collapse.vue';
import Helptip from '@/components/common/helptip/helptip.vue';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import panelPropertyBase from '@/mixin/panel-property-base.js';
import { mergeObj } from '@/utils/util.js';
import { mapState } from 'vuex';
import BaseOption from '../../common/base-option/base-option.vue';
import config from './config.js';
import dfCssStyleAttrs from './cssStyle-default.js';

export default {
  name: 'PanelProperty',
  components: {
    BaseOption,
    OptionCollapse,
    PanelLabelOverflowTooltip,
    Helptip,
    ValueInputer,
  },
  mixins: [panelPropertyBase],
  props: ['config', 'widgetInstanceId', 'widget'],
  data() {
    const _config = JSON.parse(JSON.stringify(config));
    const { property } = _config.config;
    return {
      isLoading: false,
      form: property,
      rules: {},
      dfCssStyleAttrs: {},
      hiddenFields: [],
      winLocationOption: [
        {
          label: this.$demoi18n('option.align.center'),
          value: 'winCenter',
        },
        {
          label: this.$demoi18n('win-container.upperLeftCorner'),
          value: 'winLeftTop',
        },
        {
          label: this.$demoi18n('win-container.lowerLeftCorner'),
          value: 'winLeftDown',
        },
        {
          label: this.$demoi18n('win-container.topRightCorner'),
          value: 'winRightTop',
        },
        {
          label: this.$demoi18n('win-container.lowerRightCorner'),
          value: 'winRightDown',
        },
      ],
    };
  },
  computed: {
    ...mapState({
      panelConfigs: state => state.VisualComponentsModule.panelConfigs,
    }),
    acceptEvtOption() {
      if (this.panelConfigs[this.widgetInstanceId]) {
        return this.panelConfigs[this.widgetInstanceId].events.filter(event => event.show === true);
      }
      return [];
    },
  },
  watch: {
    'form.dialogBackgroundColor'(color) {
      if (!this.form.cssStyle) {
        this.form.cssStyle = {};
      }
      if (!this.form.cssStyle.popBox) {
        this.form.cssStyle.popBox = {};
      }
      this.form.cssStyle.popBox.backgroundColor = color;
    },
  },
  created() {
    // 读取配置
    if (this.config) {
      this.form = JSON.parse(JSON.stringify(this.config.config.property));
      this.initDfCssStyleAttrs();
    }

    // 合并config.js属性，防止新增属性缺失而报错
    const _form = JSON.parse(JSON.stringify(config.config.property));
    this.form = mergeObj(_form, this.form);
  },
  methods: {
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    initDfCssStyleAttrs() {
      this.dfCssStyleAttrs = dfCssStyleAttrs;
    },
    changeMask(val) {
      if (!val) {
        this.form.isHideTopABar = false;
      }
    },
    componentStyleChange(val) {
      this.form.dialogBackgroundColor = this.dfCssStyleAttrs.popBox.backgroundColor[val];
    },
  },
};
</script>

<style lang="less" scoped>
@import '../../common/less/panel-property.less';
</style>
<style lang="less" scoped>
.panel-property {
  :deep(.el-form-item) {
    .el-form-item__content {
      display: flex;
      min-height: 40px;
      align-items: center;
    }
    &.background {
      .el-color-picker__color {
        border: none;
        border-left: 1px solid #999999;
      }
    }
  }
  .content {
    .helptip_line {
      display: flex;
      padding: 10px 10px 10px 25px;
      .helptip_label {
        line-height: 1;
      }
    }
    .prop-form {
      padding: 0 10px;

      .icon {
        line-height: 40px;
        :deep(.el-icon-picture) {
          font-size: 20px;
        }
      }

      :deep(.el-form-item) {
        margin-bottom: 0;
        .el-form-item__error {
          white-space: initial;
        }
      }
      .input-number {
        width: 100%;
        :deep(.el-input-number__decrease) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input-number__increase) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input__inner) {
          padding-left: 19px;
          padding-right: 19px;
        }
      }
      .color-radio-group {
        background-color: #eeeeee;
        :deep(.el-radio-button__inner) {
          display: inline-block;
          padding: 2px 2px;
          border: 0;
          border-radius: 0;
          height: 24px;
          margin: 2px 2px;
          background: #eeeeee;
        }
        :deep(.is-active) {
          .el-radio-button__inner {
            background-color: #409eff;
          }
        }
      }
      .targetValLabel {
        display: inline-block;
        padding: 2px 0;
      }
      .el-radio {
        padding-top: 10px;
        padding-left: 30px;
        white-space: normal;
      }
      .variableTitle {
        .el-select {
          width: 100%;
          padding: 10px 5% 10px 10%;
        }
        .el-input {
          padding: 0 5% 10px 10%;
        }
      }
    }
  }
}
</style>

<style lang="less" scoped>
@import './panel-property.less';
</style>

<style lang="less" scoped>
.dark {
  .percent_max {
    .label {
      color: #98cae6;
    }
  }
  .helptip_line {
    color: #fff;
  }
}
</style>
